<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h1{
            width: 300px;
            margin: 0 auto;
        }
        .box{
            margin: 0 auto;
            width: 300px;
        }
    </style>
</head>
<body>
    <h1>表单进阶-下拉菜单</h1>
    <br>
    <div class="box">
        <div>你的收获地址</div>
        <!-- select 支持的属性
          1.size        显示几个
          2.multiple    选多个
        -->

        <!-- option 支持的属性
          1.value       提供给后端需要用的value值              
          2.selected    默认选中
        -->
        <select  name="" id="">
            <option value="xa" selected>西安</option>
            <option value="sx">陕西</option>
            <option value="nx">宁夏</option>
            <option value="qh">青海</option>
        </select>
        <br><br>

        <div>多显示</div>
        <select size="3" name="" id="">
            <option value="">西安</option>
            <option value="">陕西</option>
            <option value="">宁夏</option>
            <option value="">青海</option>
        </select>
        <br><br>

        <div>按住ctrl多选</div>
        <select size="3" multiple name="" id="">
            <option value="" selected>西安</option>
            <option value="" selected>陕西</option>
            <option value="">宁夏</option>
            <option value="">青海</option>
        </select>
    </div>
</body>
</html>